<template>
	<view class="add-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" :title="title"></uni-navbar></view>

		<view class="form-box">
			<u-form :model="form" ref="uForm">
				<u-form-item class="form-item" required label="标题" prop="title">
					<!-- block -->
					<u-input v-model="form.title" type="text" placeholder="请输入标题" />
				</u-form-item>
				<!-- 类型 -->
				<block v-if="['2'].indexOf(module) == -1">
					<u-form-item class="form-item" required :label="key + '类型'" prop="type">
						<u-input v-model="type" type="select" :select-open="typeShow" placeholder="请选择类型" @click="typeShow = true" />
						<u-select :list="typeList" v-model="typeShow" @confirm="typeConfirm"></u-select>
					</u-form-item>
				</block>
				<!-- 得分 -->
				<block v-if="['7', '20'].indexOf(module) != -1">
					<u-form-item class="form-item" required label="得分" prop="zdyScore">
						<!-- block -->
						<u-input v-model="form.zdyScore" type="number" placeholder="请输入得分" />
					</u-form-item>
				</block>
				<block v-if="['1', '2', '7', '20'].indexOf(module) != -1">
					<u-form-item class="form-item" required label="组织部门" prop="organizeDept">
						<!-- block -->
						<u-input v-model="form.organizeDept" type="text" placeholder="请输入组织部门" />
					</u-form-item>
					<u-form-item class="form-item" label="地点">
						<!-- block -->
						<u-input v-model="form.address" type="text" placeholder="请输入地点" />
					</u-form-item>
				</block>
				<block v-if="['11'].indexOf(module) != -1">
					<u-form-item class="form-item" required label="获益情况" prop="type11">
						<u-input v-model="type" type="select" :select-open="typeShow" placeholder="请选择获益情况" @click="typeShow = true" />
						<u-select :list="typeList" v-model="typeShow" @confirm="typeConfirm"></u-select>
					</u-form-item>
				</block>
				<!-- 类型联动 -->
				<block v-if="['2'].indexOf(module) != -1">
					<u-form-item class="form-item" required label="组织类型" prop="type">
						<u-input v-model="type" type="select" :select-open="typeShow" placeholder="请选择类型" @click="typeShow = true" />
						<u-select :list="typeList" v-model="typeShow" @confirm="typeConfirm"></u-select>
					</u-form-item>
					<u-form-item class="form-item" required label="活动类型" prop="secType">
						<u-input v-model="secType" type="select" :select-open="secTypeShow" placeholder="请选择类型" @click="secTypeShow = true" />
						<u-select :list="secTypeList" v-model="secTypeShow" @confirm="secTypeConfirm"></u-select>
					</u-form-item>
				</block>
				<!-- 发言类型 -->
				<block v-if="['0'].indexOf(module) != -1">
					<u-form-item class="form-item" required :label="key + '类型'" prop="mul_check">
						<u-checkbox-group @change="checkboxGroupChange3">
							<u-checkbox v-model="item.checked" :disabled="item.disabled" v-for="(item, index) in mulList3" :key="index" :name="item.name">{{ item.name }}</u-checkbox>
						</u-checkbox-group>
					</u-form-item>
				</block>
				<!-- 采用情况 -->
				<block v-if="['5'].indexOf(module) != -1">
					<u-form-item class="form-item" label="采用">
						<u-checkbox-group @change="checkboxGroupChange5">
							<u-checkbox v-model="item.checked" :disabled="item.disabled" v-for="(item, index) in mulList5" :key="index" :name="item.name">{{ item.name }}</u-checkbox>
						</u-checkbox-group>
					</u-form-item>
				</block>
				<!-- 批示情况 -->
				<block v-if="['12'].indexOf(module) != -1">
					<u-form-item class="form-item" label="批示情况">
						<u-checkbox-group @change="checkboxGroupChange12">
							<u-checkbox v-model="item.checked" :disabled="item.disabled" v-for="(item, index) in mulList12" :key="index" :name="item.name">{{ item.name }}</u-checkbox>
						</u-checkbox-group>
					</u-form-item>
				</block>
				<!-- 日期 -->
				<block v-if="['1', '2', '7', '20'].indexOf(module) == -1">
					<u-form-item class="form-item" required :label="key + '日期'" prop="performDate"><date-time-picker placeholder="请选择日期" :defaultValue="form.performDate" fields="day" @change="timeChange($event, 'performDate')"></date-time-picker></u-form-item>
				</block>
				<!-- 日期 -->
				<block v-if="['1', '2', '7', '20'].indexOf(module) != -1">
					<u-form-item class="form-item" required label="开始时间" prop="performDate"><date-time-picker placeholder="请选择日期" :defaultValue="form.performDate" fields="day" @change="timeChange($event, 'performDate')"></date-time-picker></u-form-item>
					<u-form-item class="form-item" required label="结束时间" prop="performEndDate"><date-time-picker placeholder="请选择日期" :defaultValue="form.performEndDate" fields="day" @change="timeChange($event, 'performEndDate')"></date-time-picker></u-form-item>
					<u-form-item class="form-item" label="次数">
						<!-- block -->
						<u-input v-model="form.joinNum" type="number" placeholder="请输入次数" />
					</u-form-item>
				</block>
				<!-- 活动组 -->
				<block v-if="['0'].indexOf(module) != -1">
					<u-form-item class="form-item" label="活动组" v-if="$roleCodes('zhuanweihui') || this.$roleCodes('sys_manager')">
						<u-input v-model="hdzName" type="select" :select-open="hdzShow" placeholder="请选择活动组" @click="hdzShow = true" />
						<u-select :list="hdzList" v-model="hdzShow" @confirm="hdzConfirm"></u-select>
					</u-form-item>
					<u-form-item class="form-item" required label="活动组" v-else>{{ hdzName }}</u-form-item>
				</block>
				<!-- 履职代表 -->
				<block v-if="['1', '2'].indexOf(module) == -1">
					<u-form-item class="form-item" required :label="key + '代表'" v-if="$roleCodes('zhuanweihui') || this.$roleCodes('sys_manager')">
						<u-input v-model="cjName" type="select" :select-open="cjShow" placeholder="请选择代表" @click="cjShow = true" />
						<select-tree ref="cjTree" :show="cjShow" :range="cjList" :selected="cjStr" @confirm="treeConfirm($event, 'cj')" @cancel="treeCancel($event, 'cj')"></select-tree>
					</u-form-item>
					<u-form-item class="form-item" :label="key + '代表'" v-else>{{ userInfo.username }}</u-form-item>
				</block>
				<!-- 代表 -->
				<block v-if="['1', '2'].indexOf(module) != -1">
					<u-form-item class="form-item" required label="参加代表">
						<u-input v-model="cjName" type="select" :select-open="cjShow" placeholder="请选择代表" @click="cjShow = true" />
						<select-tree ref="cjTree" :show="cjShow" :range="cjList" :selected="cjStr" @confirm="treeConfirm($event, 'cj')" @cancel="treeCancel($event, 'cj')"></select-tree>
					</u-form-item>
					<!-- <u-form-item class="form-item" label="迟到代表">
						<u-input v-model="cdName" type="select" :select-open="cdShow" placeholder="请选择代表" @click="cdShow = true" />
						<select-tree ref="cdTree" :show="cdShow" :range="cdList" :selected="cdStr" @confirm="treeConfirm($event, 'cd')" @cancel="treeCancel($event, 'cd')"></select-tree>
					</u-form-item> -->
					<!-- <u-form-item class="form-item" label="早退代表">
						<u-input v-model="ztName" type="select" :select-open="ztShow" placeholder="请选择代表" @click="ztShow = true" />
						<select-tree ref="ztTree" :show="ztShow" :range="ztList" :selected="ztStr" @confirm="treeConfirm($event, 'zt')" @cancel="treeCancel($event, 'zt')"></select-tree>
					</u-form-item> -->
					<u-form-item class="form-item" label="请假代表">
						<u-input v-model="qjName" type="select" :select-open="qjShow" placeholder="请选择代表" @click="qjShow = true" />
						<select-tree ref="qjTree" :show="qjShow" :range="qjList" :selected="qjStr" @confirm="treeConfirm($event, 'qj')" @cancel="treeCancel($event, 'qj')"></select-tree>
					</u-form-item>
					<u-form-item class="form-item" label="缺席代表">
						<u-input v-model="qxName" type="select" :select-open="qxShow" placeholder="请选择代表" @click="qxShow = true" />
						<select-tree ref="qxTree" :show="qxShow" :range="qxList" :selected="qxStr" @confirm="treeConfirm($event, 'qx')" @cancel="treeCancel($event, 'qx')"></select-tree>
					</u-form-item>
				</block>

				<u-form-item class="form-item" :label="key + '内容'"><u-input v-model="form.content" type="textarea" :placeholder="'请输入' + key + '内容'" :clearable="false" :height="160" :maxlength="-1" /></u-form-item>
				<u-form-item class="form-item" required label="上传图片">
					<!-- block -->
					<uni-file-upload v-model:list="imageList" :type="['image']" :limit="10"></uni-file-upload>
				</u-form-item>
				<u-form-item class="form-item" label="上传文件">
					<!-- block -->
					<uni-file-upload v-model:list="fileList" :type="['all']" :limit="10"></uni-file-upload>
				</u-form-item>
			</u-form>
		</view>

		<view class="fiexd-btm"><u-button class="form-btn" type="error" @click="confirm">提交</u-button></view>

		<view v-if="false && qjList"></view>
	</view>
</template>

<script>
import dateTimePicker from '@/components/uni-datetime-picker';
import selectTree from '@/components/uni-select-tree.vue';
import uniFileUpload from '@/components/uni-uploader.vue';
import { mapState } from 'vuex';
export default {
	components: {
		dateTimePicker,
		uniFileUpload,
		selectTree
	},
	data() {
		return {
			id: '',
			title: '提交人大会议',
			key: '会议',
			navItem: 1,
			module: '1',

			imageList: [],
			fileList: [],

			mulList3: [
				{
					name: '大会口头发言',
					checked: false,
					disabled: false
				},
				{
					name: '常委会口头发言',
					checked: false,
					disabled: false
				},
				{
					name: '被市委市政府领导批示',
					checked: false,
					disabled: false
				},
				{
					name: '常委会会议微建言',
					checked: false,
					disabled: false
				},
				{
					name: '全体会议、常委会议发言汇编',
					checked: false,
					disabled: false
				}
			],

			mulList5: [
				{
					name: '全国采用',
					checked: false,
					disabled: false
				},
				{
					name: '省级采用',
					checked: false,
					disabled: false
				},
				{
					name: '市级采用',
					checked: false,
					disabled: false
				}
			],

			mulList12: [
				{
					name: '中央领导批示',
					checked: false,
					disabled: false
				},
				{
					name: '省领导批示',
					checked: false,
					disabled: false
				},
				{
					name: '市领导批示',
					checked: false,
					disabled: false
				}
			],

			type: '',
			typeShow: false,
			typeList: [],

			secType: '',
			secTypeShow: false,
			secTypeList: [],

			cjIds: [],
			cjName: '',
			cjShow: false,
			cjList: [],
			cjStr: '',

			cdIds: [],
			cdName: '',
			cdShow: false,
			cdList: [],
			cdStr: '',

			ztIds: [],
			ztName: '',
			ztShow: false,
			ztList: [],
			ztStr: '',

			qjIds: [],
			qjName: '',
			qjShow: false,
			qjList: [],
			qjStr: '',

			qxIds: [],
			qxName: '',
			qxShow: false,
			qxList: [],
			qxStr: '',

			hdzId: '',
			hdzName: '',
			hdzShow: false,
			hdzList: [],

			performDate: '',
			performEndDate: '',

			form: {
				module: '1',
				title: '',
				type: '',
				secType: '',
				zdyScore: '',
				organizeDept: '',
				address: '',
				joinNum: '',
				joinUser: '',
				performDate: '',
				performEndDate: '',
				content: ''
			},
			rules: {
				title: [
					{
						required: true,
						message: '请输入标题',
						trigger: 'change'
					}
				],
				type: [
					{
						required: true,
						message: '请选择类型',
						trigger: 'change'
					}
				],
				type11: [
					{
						required: true,
						message: '请选择获益情况',
						trigger: 'change'
					}
				],
				secType: [
					{
						required: true,
						message: '请选择活动类型',
						trigger: 'change'
					}
				],
				organizeDept: [
					{
						required: true,
						message: '请输入组织部门',
						trigger: 'change'
					}
				],
				performDate: [
					{
						required: true,
						message: '请选择日期',
						trigger: 'change'
					}
				],
				performEndDate: [
					{
						required: true,
						message: '请选择结束日期',
						trigger: 'change'
					}
				],
				mul_check: [
					{
						required: true,
						message: '请选择发言类型',
						trigger: 'change'
					}
				],
				zdyScore: [
					{
						required: true,
						message: '请输入分数',
						trigger: 'change'
					}
				]
			}
		};
	},
	onLoad(option) {
		this.loadLogin();
		this.title = '提交' + option.name;
		this.module = option.code;
		this.form.module = option.code;
		this.loadDict('perform_' + option.code + '_type', 'typeList');
		this.loadDict('wyhdz', 'hdzList');

		switch (option.code) {
			case '1':
				this.key = '会议';
				break;
			case '2':
				this.key = '活动';
				break;
			case '3':
				this.key = '发言';
				break;
			case '11':
				this.key = '活动';
				break;
			case '12':
				this.key = '发表';
				break;
			default:
				this.key = '';
		}
		this.loadTeam('weiyuan, changwei');

		if (option && option.id) {
			this.id = option.id;
			this.title = this.title.replace('提交', '修改');
			this.loadData();
		}

		uni.setNavigationBarTitle({
			title: this.title
		});
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		kindGroupChange(e) {
			this.form.kind = e;
		},
		treeConfirm(e, type) {
			if (!e || e.length == 0) {
				this[type + 'Show'] = false;
				this[type + 'Name'] = '';
				this[type + 'Ids'] = [];
				return false;
			}
			this[type + 'Ids'] = [];
			let names = [];
			let i = 0;
			if (e.length > 0) {
				e.forEach((item) => {
					this[type + 'Ids'].push(item.id);
					if (i < 3) {
						names.push(item.name);
						i++;
					}
				});
				this[type + 'Name'] = names.join(',') + '等' + e.length + '人';
				if (this.$roleCodes('weiyuan')) {
					this[type + 'Name'] = names[0];
				}
			}
			this[type + 'Show'] = false;
		},
		treeCancel(e, type) {
			this[type + 'Show'] = false;
		},
		timeChange({ date, dt }, idx) {
			this.form[idx] = date.year + '-' + date.month2 + '-' + date.day2;
			this[idx] = Math.round(dt / 1000);
		},
		typeConfirm(e) {
			this.type = e[0].label;
			this.form.type = e[0].value;
			this.secType = '';
			this.form.secType = null;
			this.loadDict('perform_2_' + e[0].value + '_sectype', 'secTypeList');
		},
		secTypeConfirm(e) {
			this.secType = e[0].label;
			this.form.secType = e[0].value;
		},
		hdzConfirm(e) {
			this.hdzName = e[0].label;
			this.hdzId = e[0].value;
		},
		checkboxGroupChange3(e) {
			let arr = [];
			e.forEach((item) => {
				this.mulList3.forEach((key, index) => {
					if (key.name == item) {
						arr.push(index + 1);
					}
				});
			});
			this.form.mul_check = arr.join(',');
		},
		checkboxGroupChange5(e) {
			let arr = [];
			e.forEach((item) => {
				this.mulList5.forEach((key, index) => {
					if (key.name == item) {
						arr.push(index + 1);
					}
				});
			});
			this.form.mul_check = arr.join(',');
		},
		checkboxGroupChange12(e) {
			let arr = [];
			e.forEach((item) => {
				this.mulList12.forEach((key, index) => {
					if (key.name == item) {
						arr.push(index + 1);
					}
				});
			});
			this.form.mul_check = arr.join(',');
		},
		loadLogin() {
			if (this.userInfo.Authorization) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.userId = this.userInfo.sysUser.id;
				this.hdzId = this.userInfo.userInfo.wyhdz;
				this.hdzName = this.userInfo.userInfo.wyhdzName;
			} else {
				this.$logout();
			}
		},
		loadDict(type, list) {
			this.$request('/system/sys-dict/dictList', {
				clientCode: this.clientCode,
				sysDict: {
					dictType: type
				}
			}).then((res) => {
				if (!res.data) {
					return false;
				}
				this[list] = [];
				res.data.forEach((item) => {
					this[list].push({
						value: item.dictValue,
						label: item.dictName
					});
					if (list == 'secTypeList' && this.form.secType == item.dictValue) {
						this.secType = item.dictName;
					}
				});
			});
		},
		loadData() {
			this.$request('/perform/query/' + this.id).then((res) => {
				this.fileList = res.data.fileList;
				this.imageList = res.data.imageList;
				this.form = res.data.perform;
				let regx = /<[^>]*>|<\/[^>]*>/gm;
				if (this.form.content) {
					this.form.content = this.form.content.replace(regx, '');
				}
				if (this.form.wyhdz && this.form.wyhdzName) {
					this.hdzId = this.form.wyhdz;
					this.hdzName = this.form.wyhdzName;
				}
				// this.form.performDate = this.form.performDate;

				this.typeList.forEach((item) => {
					if (this.form.type == item.value) {
						this.type = item.label;
					}
				});

				this.loadDict('perform_2_' + this.form.type + '_sectype', 'secTypeList');

				if (['5', '12'].indexOf(this.module) != -1) {
					let mulCheck = this.form.mulCheck.split(',');
					this.form.mul_check = this.form.mulCheck;
					mulCheck.forEach((item) => {
						if (parseInt(item) > 0 && this['mulList' + this.module].length > 0) {
							this['mulList' + this.module][parseInt(item) - 1].checked = true;
						}
					});
				}
				if (res.data.cjList && res.data.cjList.length > 0) {
					let names = [];
					let i = 0;
					this.cjIds = [];
					res.data.cjList.forEach((item) => {
						this.cjIds.push(item.userId);
						if (i < 2) {
							names.push(item.userName);
							i++;
						}
					});
					this.cjStr = this.cjIds.join(',');
					this.cjName = names.join(',') + '等' + this.cjIds.length + '人';
				}
				if (res.data.cdList && res.data.cdList.length > 0) {
					let names = [];
					let i = 0;
					this.cdIds = [];
					res.data.cdList.forEach((item) => {
						this.cdIds.push(item.userId);
						if (i < 2) {
							names.push(item.userName);
							i++;
						}
					});
					this.cdStr = this.cdIds.join(',');
					this.cdName = names.join(',') + '等' + this.cdIds.length + '人';
				}
				if (res.data.ztList && res.data.ztList.length > 0) {
					let names = [];
					let i = 0;
					this.ztIds = [];
					res.data.ztList.forEach((item) => {
						this.ztIds.push(item.userId);
						if (i < 2) {
							names.push(item.userName);
							i++;
						}
					});
					this.ztStr = this.ztIds.join(',');
					this.ztName = names.join(',') + '等' + this.ztIds.length + '人';
				}
				if (res.data.qjList && res.data.qjList.length > 0) {
					let names = [];
					let i = 0;
					this.qjIds = [];
					res.data.qjList.forEach((item) => {
						this.qjIds.push(item.userId);
						if (i < 2) {
							names.push(item.userName);
							i++;
						}
					});
					this.qjStr = this.qjIds.join(',');
					this.qjName = names.join(',') + '等' + this.qjIds.length + '人';
				}
				if (res.data.qxList && res.data.qxList.length > 0) {
					let names = [];
					let i = 0;
					this.qxIds = [];
					res.data.qxList.forEach((item) => {
						this.qxIds.push(item.userId);
						if (i < 2) {
							names.push(item.userName);
							i++;
						}
					});
					this.qxStr = this.qxIds.join(',');
					this.qxName = names.join(',') + '等' + this.qxIds.length + '人';
				}
			});
		},
		loadTeam(type) {
			this.$request('/system/sys-user/team_users', {
				clientCode: this.clientCode,
				currentUserId: this.userId,
				dictType: 'jiebie',
				roleCodes: type,
				teamType: '2',
				withCw: '1'
			}).then((res) => {
				let arr = [];
				res.data.forEach((item, index) => {
					arr.push({
						id: item.id,
						name: item.name,
						list: []
					});
					item.list.forEach((key) => {
						arr[index].list.push({
							id: key.id,
							name: key.name
						});
					});
				});
				this.cjList = arr;
				this.cdList = arr;
				this.ztList = arr;
				this.qjList = arr;
				this.qxList = arr;
			});
		},
		confirm() {
			this.$refs.uForm.validate((valid) => {
				if (!valid) {
					return false;
				} else {
					let data = {};
					if (this.id) {
						this.form.id = this.id;
					}
					if (this.$roleCodes('zhuanweihui') || this.$roleCodes('sys_manager')) {
						if (!this.cjIds.length) {
							this.$msg('请选择代表！');
							return false;
						}
						this.form.joinUser = this.cjIds.length;
					} else {
						this.cjIds = [this.userId];
						this.form.joinUser = 1;
					}

					if (['1'].indexOf(this.module) != -1) {
						if (this.performEndDate < this.performDate) {
							this.$msg('开始时间应小于结束时间');
							return false;
						}
					}

					if (this.imageList.length < 1) {
						this.$msg('请上传图片');
						return false;
					}

					this.form.clientCode = this.clientCode;
					this.form.createBy = this.userId;
					data = {
						perform: this.form,
						fileList: this.fileList,
						imageList: this.imageList,
						cjTeams: this.hdzId,
						cjIds: this.cjIds.join(','),
						cdIds: this.cdIds.join(','),
						ztIds: this.ztIds.join(','),
						qjIds: this.qjIds.join(','),
						qxIds: this.qxIds.join(',')
					};
					this.$request('/perform/add', data, {
						load: true
					}).then((res) => {
						this.$msg(res.msg);
						setTimeout(() => {
							let pre = this.$prePage();
							if (pre && pre.loadData) {
								pre.loadData('refresh');
							}
							uni.navigateBack();
						}, 500);
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.add-view {
	background-color: #fff;
}

.form-box {
	border-top: 20rpx solid $u-border-color;

	.form-item {
		@include mp-flex;
		border-bottom: 20rpx solid $u-border-color;
	}
}

.fiexd-btm {
	position: static;
	padding: 30rpx;
}
</style>
